<template>
	<uv-popup :safeAreaInsetBottom="false" ref="popup" :closeOnClickOverlay="closeOnClickOverlay" mode="center" round="12">
		<view class="popup-box ss-flex-1 ss-flex-col ss-col-center ss-p-y-40 ss-p-x-24">
			<view class="ss-font-32 font-w-500">用户协议与隐私政策</view>
			<view class="ss-m-t-40 ss-font-28 font-color-dark6">欢迎使用{{ sheep.$store('app').appName }}小程序，我们非常注重您的个人信息和隐私保护。为了更好地保障您的个人权益，您在使用我们的产品前，希望您阅读并同意以下协议</view>
			<view class="ss-font-28 font-color-dark6 ss-m-t-24 ss-text-center ss-w-100">
				<text>点击“同意”，视为您阅读并同意</text>
				<text @tap="sheep.$router.go('/pages/public/parse?parseKey=user_service_protocol')" class="font-color-main">《用户服务协议》</text>
				<text class="font-color-text">和</text>
				<text @click="sheep.$router.go('/pages/public/parse?parseKey=user_privacy_protocol')" class="font-color-main">《用户隐私政策》</text>
			</view>
			<view class="ss-flex ss-gap-32 ss-m-t-40 ss-w-100">
				<!-- <navigator class="ss-reset-button exit-btn" open-type="exit">拒绝并退出</navigator> -->
				<button @tap="outApp" class="ss-reset-button exit-btn">拒绝并退出</button>
				<button @tap="agreement" class="ss-reset-button login-btn">同意</button>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import sheep from "@/sheep"
	const popup = ref() 
	import { changeReadModal } from '@/sheep/hooks/useModal';
	const modalStore = sheep.$store('modal');
	const props = defineProps({
		modelValue:{
			type:Boolean,
			default:false
		},
		closeOnClickOverlay:{
			type:Boolean,
			default:false
		}
	})
	const readShow = computed(() => modalStore.readShow);
	watch(readShow,(value) => {
		nextTick(() => {
			if(value) popup.value.open()
			else popup.value.close()
		})
	})
	const emit = defineEmits(['update:modelValue','confirm','cancel'])
	const state = reactive({
		show:false
	})
	const modal = ref()
	watch(() => props.modelValue,(value) => {
		emit('update:modelValue',value)
		if(value) modal.value.open()
		else modal.value.close()
	})
	function agreement(){
		changeReadModal(false)
		uni.setStorageSync('isRead',true)
		uni.showTabBar()
	}
	function outApp(){
		uni.exitMiniProgram()
	}
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		.login-btn {
			width: 100%;
			height: 88rpx;
			background: $main-color;
			border-radius: 64rpx;
			color: #FFFFFF;
		}
		.exit-btn {
			width: 100%;
			height: 88rpx;
			border: 1rpx solid $main-color;
			color:$main-color;
			border-radius: 64rpx;
		}
		.login-btn:active {
			background: $main-color;
			color: #FFFFFF;
		}
	}
</style>